<template>
  <div class="list flex flex-fd-c flex-ai-c">
    <template v-if="listData && listData.list.length">
      <div
        v-for="item in listData.list"
        class="lease-list-item flex flex-jc-sp"
      >
        <div class="left flex flex-jc-sp cursor-p" @click="go(item.id)">
          <div class="img">
            <img :src="item.thumb" alt="" srcset="" />
          </div>
          <div class="info flex flex-fd-c">
            <h2
              class="color-333"
              style="line-height: 40px; margin-bottom: 26px"
            >
              <span class="hot-tag" v-if="item.is_top === 1">HOT</span>
              {{ item.title }}
            </h2>
            <p class="color-333" style="margin-bottom: 24px;">{{ item.area }}㎡·{{ item.address }}</p>
            <p class="color-666 flex flex-ai-c" style="margin-bottom: 24px;">
              <img
                style="margin-right: 6px"
                src="~@/assets/images/icon_metro.png"
                alt=""
                srcset=""
              />
              {{ item.address }}
            </p>
            <div class="tag-list flex" style="margin-bottom: 24px;">
              <div
                class="tag"
                v-for="itemx in item.feature_list"
                :key="itemx.id"
              >
                {{ itemx.name }}
              </div>
            </div>
          </div>
        </div>
        <div class="right flex flex-fd-c flex-ai-c" style="width: 200px">
          <p style="color: #c7343c" class="mb-18">
            <span style="font-size: 26px; font-weight: bold">{{
              item.price
            }}</span>
            <span style="font-size: 18px">元/月</span>
          </p>
          <p class="color-999 mb-18" style="font-size: 14px">
            {{ item.area_price }}元/㎡/天
          </p>
          <p
            style="opacity: 0.6; font-size: 12px"
            class="cursor-p"
            @click="tapCollect(item.id, item.is_user_collect)"
          >
            <i class="el-icon-star-on" style="color: #3f454b"></i>
            <span style="color: #3f454b">
              {{ item.is_user_collect === 1 ? '取消收藏' : '收藏' }}</span
            >
          </p>
        </div>
      </div>
      <el-pagination
        v-if="isPagination"
        clas="mb-136"
        background
        layout="prev, pager, next"
        hide-on-single-page
        :total="listData.total"
        @current-change="currentChange"
      >
      </el-pagination>
    </template>
    <template v-else>
      <div class="flex flex-jc-c flex-ai-c" style="height: 300px">暂无数据</div>
    </template>
  </div>
</template>

<script>
import { postApiHouseCollectHouse } from '@/api'
import { Message } from 'element-ui'

export default {
  props: {
    isPagination: {
      type: Boolean,
      default: false,
    },
    listData: {
      type: Object,
      default: () => ({
        total: 0,
        list: [
          {
            id: 1,
            no: 'F0000000000001', //房源编号
            title: '大冲商务中心1', //房源标题
            price: '1999.00', //总价
            area: 1099, //面积
            work_num: '100~200', //工位数
            indec_id: 1, //装修程度id
            address: '南山区粤海大道00001号1号楼1楼', //详细地址
            sale_id: null,
            build_id: 1, //所属楼盘
            feature: '["1","3","4","5","6","7"]',
            content: '房屋特色', //房屋特色
            thumb: '11', //房源图片
            cengshu: '20/50', //层数
            zu_time: -1,
            min_time: -1,
            zhuce: 1, //是否可注册  1是  0否
            cate_id: 1, //类型ID
            run: '100.00', //管理费
            car: '100.00', //停车费
            area_price: '2.00', //单价
            peitao: '周边配套', //周边配套
            is_top: 1,
            region_id: 1, //地区ID
            region_dis_id: 2, //地点ID
            location_feature: '进迪特qqq', //位置特色
            see_house_time: '随时可看', //看房时间
            tiaokuan: '商务条款', //商务条款
            feature_list: [
              //房源特色
              {
                id: 1,
                name: '可注册',
              },
              {
                id: 3,
                name: '带办公家具',
              },
              {
                id: 4,
                name: '热门楼盘',
              },
              {
                id: 5,
                name: '户型方正',
              },
              {
                id: 6,
                name: '免费车位',
              },
              {
                id: 7,
                name: '知名开发商',
              },
            ],
          },
        ],
      }),
    },
  },
  methods: {
    currentChange(page) {
      this.$emit('currentChange', page)
    },
    go(id) {
      this.$router.push(`/detail/${id}`)
    },
    tapCollect(house_id, status) {
      console.log('status: ', status)
      const user_id = localStorage.getItem('id')
      if (!user_id) {
        this.$router.push('login')
        return
      }
      postApiHouseCollectHouse({
        house_id,
        user_id,
        status: status === 0 ? 1 : -1,
      }).then((res) => {
        if (res.code === 200) {
          Message.success(res.msg)
          this.$parent.getHouseList()
        } else {
          Message.info('您已经收藏过了')
          this.$parent.getHouseList()
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.list {
  .mb-18 {
    margin-bottom: 18px;
  }
  .mb-136 {
    margin-bottom: 136px;
  }
  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #eee;
    color: #333;
  }
  /deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
    color: #333;
  }

  /deep/ .el-pagination.is-background .el-pager li {
    margin: 0 5px;
    background-color: #fff;
    border: 1px solid #f4f4f5;
    color: #606266;
    min-width: 30px;
    border-radius: 2px;
  }
  .lease-list-item {
    width: 100%;
    padding-bottom: 28px;
    margin-bottom: 28px;
    border-bottom: 1px solid #eeeeee;
    .left {
      width: 960px;
      .img {
        width: 286px;
        height: 216px;
        border-radius: 6px;
        overflow: hidden;
        margin-right: 30px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .info {
        flex: 1;
        .hot-tag {
          display: inline-block;
          width: 54px;
          height: 32px;
          background-color: #c7343c;
          border-radius: 6px;
          color: white;
          text-align: center;
          line-height: 32px;
        }
        .tag-list {
          .tag {
            width: 76px;
            height: 24px;
            background-color: #f2f2f2;
            padding: 6px;
            color: #7e9cae;
            text-align: center;
            line-height: 24px;
            margin-right: 8px;
          }
        }
      }
    }
  }
}
</style>